<template>
<!--component/changeCity/changeCity.wxml-->
<view class="change-city">
    <text style="margin-left: 70rpx;">切换城市:</text>
    <picker @change="bindProv" :range="proviceList" range-key="value">
      <view class="sel-city">
        <view class="picker">
          <text>{{province}}</text>
        </view>
        <image src="/static/images/dwicon.png"></image>
      </view>
    </picker>
    <picker @change="bindCity" :range="cityList" range-key="value">
      <view class="sel-city">
        <view class="picker">
          <text>{{city}}</text>
        </view>
        <image src="/static/images/dwicon.png"></image>
      </view>
    </picker>
  </view>
</template>

<script>
// component/changeCity/changeCity.js
import util from "../../utils/util";

export default {
  data() {
    return {
      province: "广东",
      // city: "",
      proviceList: [],
      cityList: []
    };
  },

  components: {},
  props: {
    city: {
      type: String,
      default: ''
    }
  },
  watch: {
    city: {
      handler: function (city) {
        this.proviceList.forEach(provinceData => {
          provinceData.citylist.forEach(cityData => {
            if (cityData.value == city) {
              this.setData({
                cityList: provinceData.citylist,
                province: provinceData.value
              });
            }
          });
        });
      },
      immediate: true
    }
  },
  beforeMount: function () {
    // 在组件实例进入页面节点树时执行
    util.request('zhuanti.php', {
      action: 'get_city'
    }).then(e => {
      this.setData({
        proviceList: e.data.data,
        cityList: e.data.data[19].citylist
      });
    });
  },
  destroyed: function () {// 在组件实例被从页面节点树移除时执行
  },
  methods: {
    bindProv(e) {
      this.setData({
        province: this.proviceList[e.detail.value].value,
        cityList: this.proviceList[e.detail.value].citylist,
        city: '选择城市'
      });
      this.properties.city = "选择城市";
    },

    bindCity(e) {
      this.properties.city = this.cityList[e.detail.value].value;
      this.$emit('changeCity', {
        detail: {
          cityCode: this.cityList[e.detail.value].code,
          city: this.cityList[e.detail.value].value
        }
      });
    }

  }
};
</script>
<style>
/* component/changeCity/changeCity.wxss */
.change-city {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 20rpx;
  padding: 30rpx 0rpx;
  position: absolute;
  top: 235rpx;
  width: 90%;
  margin-left: 36rpx;
  display: flex;
  align-items: center;
}

.change-city text {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 36rpx;
  color: rgba(20, 20, 20, 1);
  opacity: 1;
  width: 102rpx;
  text-align: center;
  white-space: nowrap;
}

.sel-city {
  display: flex;
  align-items: center;
  margin-left: 80rpx;
}

.sel-city image {
  width: 19rpx;
  height: 10rpx;
  margin-left: 15rpx;
}


</style>